<template>
	<el-space>
		<!-- 模块展示按钮 -->
		<el-tooltip v-for="item in btnList" :key="item.key" effect="light" trigger="hover">
			<el-button
				plain
				:type="$store.chart[item.key] ? 'primary' : ''"
				:icon="item.icon"
				@click="$store.chart[item.key] = !$store.chart[item.key]"
			/>
			<template #content> {{ item.title }}</template>
		</el-tooltip>

		<el-divider direction="vertical" />

		<!-- 历史记录按钮 -->
		<el-tooltip v-for="item in historyList" :key="item.key" effect="light" trigger="hover">
			<el-button plain type="primary" :disabled="!item.select" :icon="item.icon" @click="item.function()" />
			<template #content> {{ item.title }}</template>
		</el-tooltip>
	</el-space>
</template>

<script setup>
const btnList = reactive([
	{
		key: 'charts',
		title: '图表组件',
		icon: 'BarChart'
	},
	{
		key: 'layers',
		title: '图层控制',
		icon: 'Layers'
	},
	{
		key: 'details',
		title: '详情设置',
		icon: 'Prism'
	}
]);

const isBackStack = computed(() => $store.chart.backStack.length > 1);

const isForwardStack = computed(() => $store.chart.forwardStack.length > 0);

const historyList = reactive([
	{
		key: 'backStack',
		// 一定会有初始化画布
		select: isBackStack,
		title: '后退',
		icon: 'ArrowBack',
		function: $store.chart.setBack
	},
	{
		key: 'forwardStack',
		select: isForwardStack,
		title: '前进',
		icon: 'ArrowForward',
		function: $store.chart.setForward
	}
]);
</script>
